<template>
  <el-row class="d-flex flex-column" v-if="$route.path === '/info/party'">
    <el-col :span="24">
      <form class="el-form query-form el-form--label-right el-form--inline">
        <div class="el-form-item el-form-item--medium" v-if="admin.mType == 2 || admin.mType == 3">
          <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
          <div class="el-form-item__content">
            <div class="el-input el-input--medium">
              <el-select v-model="query.mRegion_" placeholder="惠济区" @change="get_townAtt()">
                <el-option label="惠济区" value="1349"></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="el-form-item el-form-item--medium" v-if="!(admin.mType >= 4)">
          <label for="date" class="el-form-item__label" style="width: 60px;">街道</label>
          <div class="el-form-item__content">
            <el-select
              v-model="query.mZhenid_"
              clearable
              placeholder="请选择想要查看的街道"
              @change="get_villageAtt()"
            >
              <el-option
                v-for="(town, index) in townAtt"
                :key="index"
                :label="town.zName"
                :value="town.zhenId"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="el-form-item el-form-item--medium" v-if="!(admin.mType == 5)">
          <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
          <div class="el-form-item__content">
            <el-select
              v-model="query.mVillageid_"
              clearable
              placeholder="请选择想要查看的村"
              @change="get_groupAtt()"
            >
              <el-option
                v-for="(village, index) in villageAtt"
                :key="index"
                :label="village.vName"
                :value="village.villageId"
              ></el-option>
            </el-select>
          </div>
          <!---->
        </div>
        <div class="el-form-item el-form-item--medium">
          <label for="date" class="el-form-item__label" style="width: 80px;">党员姓名</label>
          <div class="el-form-item__content">
            <el-input v-model="query.userName" clearable placeholder="请输入姓名"></el-input>
          </div>
          <!---->
        </div>
        <div class="el-form-item el-form-item--medium ml-6">
          <!---->
          <div class="el-form-item__content">
            <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
            <!---->
          </div>
        </div>
        <div class="el-form-item el-form-item--medium ml-7 pl-2" v-if="!(admin.mType == 3)">
          <div class="el-form-item__content">
            <el-button plain icon="el-icon-plus" @click="show_form()">
              <span>添加</span>
            </el-button>
          </div>
          <!---->
        </div>
      </form>
    </el-col>
    <el-col :span="24">
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(225, 225, 225, 0.8)"
        ref="multipleTable"
        :data="items"
        border
        max-height="600"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="100" align="center"></el-table-column>
        <el-table-column type="index" width="100" align="center"></el-table-column>
        <el-table-column label="姓名" width="200" align="center" prop="yonghu.userName"></el-table-column>
        <el-table-column label="性别" width="120" align="center" prop="yonghu.userSex"></el-table-column>
        <el-table-column label="民族" width="120" align="center" prop="nation"></el-table-column>
        <el-table-column label="职务" width="300" align="center" prop="job.jName"></el-table-column>
        <el-table-column label="所属村" width="300" align="center" prop="pmiInauguralunit"></el-table-column>
        <el-table-column label="编辑" align="center" show-overflow-tooltip>
          <template slot-scope="scope" v-if="$route.path === '/info/party'">
            <el-button type="primary" icon="el-icon-tickets" @click="showAll(scope.$index)">详情</el-button>
            <el-button
              v-if="!(admin.mType == 3)"
              type="warning"
              icon="el-icon-edit"
              @click="updata(scope.$index)"
            >编辑</el-button>
            <el-button
              type="danger"
              v-if="!(admin.mType == 3)"
              icon="el-icon-delete"
              @click="del(scope.$index, 'yonghu.userName')"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-row>
          <el-col :span="12">
            <div
              class="grid-content bg-purple d-flex jc-between ai-center"
              v-if="!(admin.mType == 3)"
            >
              <el-button
                type="primary"
                icon="el-icon-delete"
                style="display: block;"
                class="h-1 w-1"
                @click="del_multip('yonghu.userName')"
              ></el-button>
              <el-upload
                class="upload-demo"
                ref="upload"
                :action="$http.defaults.baseURL + `importPartyMember`"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="success_file"
                :file-list="fileList"
                :auto-upload="false"
                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                name="importfile"
                :multiple="true"
              >
                <el-button slot="trigger" size="small" type="primary" @click="select_file">选取文件</el-button>
                <el-button
                  style="margin-left: 10px;"
                  size="small"
                  type="success"
                  @click="submitUpload"
                >上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传excel文件，建议不超过500kb</div>
              </el-upload>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.current_page"
                :page-sizes="pagination.page_sizes"
                :page-size="pagination.page_size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
              ></el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-dialog
      title="添加党员信息"
      v-if="$route.path === '/info/party'"
      width="40%"
      :show-close="false"
      :close-on-click-modal="false"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible_create"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="5.625rem"
        class="d-flex flex-column w-10 p-2 pt-0"
      >
        <el-col :span="24">
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-center">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">姓名</label>
              <div class="el-form-item__content">
                <el-input v-model="form.name" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">身份证号</label>
              <div class="el-form-item__content">
                <el-input v-model="form.pmBeiyong1" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">家庭住址</label>
              <div class="el-form-item__content">
                <el-input v-model="form.pmJiguan" clearable></el-input>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">入党时间</label>
              <div class="el-form-item__content">
                <el-date-picker
                  v-model="form.joinTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                ></el-date-picker>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" clearable style="width: 90px;">文化程度</label>
              <div class="el-form-item__content">
                <el-select v-model="form.pmiDegreeofeducation" placeholder="请选择" @change="show_mes">
                  <el-option
                    v-for="item in ['小学', '初级中学', '高级中学', '专科', '本科', '硕士研究生', '博士研究生']"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">就职单位</label>
              <div class="el-form-item__content">
                <el-input v-model="form.pmiInauguralunit" clearable></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">性别</label>
              <div class="el-form-item__content">
                <el-select v-model="form.sex" clearable placeholder="请选择">
                  <el-option :label="男" value="男"></el-option>
                  <el-option :label="女" value="女"></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">民族</label>
              <div class="el-form-item__content">
                <el-select v-model="form.nation" clearable placeholder="请选择">
                  <el-option
                    v-for="nation in nations"
                    :key="nation"
                    :label="nation.nName"
                    :value="nation.nKey"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">镇</label>
              <div class="el-form-item__content">
                <el-select
                  v-model="form.mZhenid"
                  clearable
                  :disabled="admin.mType >= 4"
                  placeholder="请选择想要查看的镇"
                  @change="get_villageAtt(true)"
                >
                  <el-option
                    v-for="(town, index) in townAtt_form"
                    :key="index"
                    :label="town.zName"
                    :value="town.zhenId"
                  ></el-option>
                </el-select>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">村</label>
              <div class="el-form-item__content">
                <el-select
                  v-model="form.pmVillage"
                  :disabled="admin.mType == 5"
                  clearable
                  placeholder="请选择想要查看的村"
                  @change="get_jobAtt(true)"
                >
                  <el-option
                    v-for="(village, index) in villageAtt_form"
                    :key="index"
                    :label="village.vName"
                    :value="village.villageId"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">职务</label>
              <div class="el-form-item__content">
                <el-select v-model="form.pmiPost" clearable placeholder="请选择">
                  <el-option
                    v-for="item in jobAtt"
                    :key="item"
                    :label="item.J_name"
                    :value="item.J_Key"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">干部职位</label>
              <div class="el-form-item__content">
                <el-input v-model="form.pmiInauguralunit" clearable></el-input>
              </div>
            </div>
          </el-col>
        </el-col>
        <el-col :span="24" class="mb-2">
          <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
            <label for="date" class="el-form-item__label" style="width: 5.625rem;">发展时间</label>
            <div class="el-form-item__content">
              <el-date-picker
                v-model="form.fazhanTime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
          </div>
          <div class="el-form-item el-form-item--medium d-flex jc-start w-10 d-flex jc-start">
            <label for="date" class="el-form-item__label" style="width: 5.625rem;">简介</label>
            <div class="el-form-item__content flex-1 pr-2">
              <el-input type="textarea" v-model="form.pmiDetails"></el-input>
            </div>
          </div>
        </el-col>
        <!-- <el-col :span="24">
          <div class="el-form-item el-form-item--medium d-flex jc-start w-10 d-flex jc-start">
            <label for="date" class="el-form-item__label" style="width: 5.625rem;">党员照片</label>
            <div class="el-form-item__content flex-1 pr-2">
              <el-upload
                ref="upload_photo"
                :action="$http.defaults.baseURL + `insertPartyMemberSubmit`"
                list-type="picture-card"
                :on-success="success_c"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :before-upload="set_form"
                :auto-upload="false"
                :data="form"
                :file-list="form.src"
                :multiple="true"
                name="dangyuan_pic"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" size="tiny">
                <img width="100%" v-if="form.src" :src="form.src" alt />
              </el-dialog>
            </div>
          </div>
        </el-col>-->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel_c">取 消</el-button>
        <el-button type="primary" @click="reset_c">重 置</el-button>
        <el-button type="primary" @click="create">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="党员信息编辑"
      v-if="$route.path === '/info/party'"
      width="40%"
      :show-close="false"
      :close-on-click-modal="false"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible_edmit"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="5.625rem"
        class="d-flex flex-column w-10 p-2 pt-0"
      >
        <el-col :span="24">
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-center">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">姓名</label>
              <div class="el-form-item__content">
                <el-input v-model="form.yonghu.userName" clearable disabled></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">身份证号</label>
              <div class="el-form-item__content">
                <el-input v-model="form.pmBeiyong1" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">家庭住址</label>
              <div class="el-form-item__content">
                <el-input v-model="form.pmJiguan" clearable></el-input>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">入党时间</label>
              <div class="el-form-item__content">
                <el-date-picker
                  v-model="form.pmiJointime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                ></el-date-picker>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" clearable style="width: 90px;">文化程度</label>
              <div class="el-form-item__content">
                <el-select v-model="form.pmiDegreeofeducation" placeholder="请选择" @change="show_mes">
                  <el-option
                    v-for="item in ['小学', '初级中学', '高级中学', '专科', '本科', '硕士研究生', '博士研究生']"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">就职单位</label>
              <div class="el-form-item__content">
                <el-input v-model="form.pmiInauguralunit" clearable></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">性别</label>
              <div class="el-form-item__content">
                <el-select v-model="form.yonghu.userSex" clearable disabled>
                  <el-option :label="男" value="男"></el-option>
                  <el-option :label="女" value="女"></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">民族</label>
              <div class="el-form-item__content">
                <el-select v-model="form.nation" clearable placeholder="请选择">
                  <el-option
                    v-for="nation in nations"
                    :key="nation"
                    :label="nation.nName"
                    :value="nation.nKey"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">镇</label>
              <div class="el-form-item__content">
                <el-select
                  v-model="form.mZhenid"
                  :disabled="admin.mType >= 4"
                  clearable
                  placeholder="请选择想要查看的镇"
                  @change="get_villageAtt(true)"
                >
                  <el-option
                    v-for="(town, index) in townAtt_form"
                    :key="index"
                    :label="town.zName"
                    :value="town.zhenId"
                  ></el-option>
                </el-select>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">村</label>
              <div class="el-form-item__content">
                <el-select
                  v-model="form.pmVillage"
                  :disabled="admin.mType == 5"
                  clearable
                  placeholder="请选择想要查看的村"
                  @change="get_jobAtt(true)"
                >
                  <el-option
                    v-for="(village, index) in villageAtt_form"
                    :key="index"
                    :label="village.vName"
                    :value="village.villageId"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">职务</label>
              <div class="el-form-item__content">
                <el-select v-model="form.job.jKey" clearable placeholder="请选择">
                  <el-option
                    v-for="item in jobAtt"
                    :key="item"
                    :label="item.J_name"
                    :value="item.J_Key"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">干部职位</label>
              <div class="el-form-item__content">
                <el-input v-model="form.pmiInauguralunit" clearable></el-input>
              </div>
            </div>
          </el-col>
        </el-col>
        <el-col :span="24" class="mb-2">
          <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
            <label for="date" class="el-form-item__label" style="width: 5.625rem;">发展时间</label>
            <div class="el-form-item__content">
              <el-date-picker
                v-model="form.pmJoined"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
          </div>
          <div class="el-form-item el-form-item--medium d-flex jc-start w-10 d-flex jc-start">
            <label for="date" class="el-form-item__label" style="width: 5.625rem;">简介</label>
            <div class="el-form-item__content flex-1 pr-2">
              <el-input type="textarea" v-model="form.pmiDetails"></el-input>
            </div>
          </div>
        </el-col>
        <!-- <el-col :span="24">
          <div class="el-form-item el-form-item--medium d-flex jc-start w-10 d-flex jc-start">
            <label for="date" class="el-form-item__label" style="width: 5.625rem;">党员照片</label>
            <div class="el-form-item__content flex-1 pr-2">
              <el-upload
                ref="upload_edmit"
                :action="$http.defaults.baseURL + `updatePartyMemberSubmit`"
                list-type="picture-card"
                :on-success="success_c"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :before-upload="set_form"
                :auto-upload="false"
                :data="form"
                :file-list="form.src"
                :multiple="true"
                name="dangyuan_pic"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" size="tiny">
                <img width="100%" v-if="form.src" :src="form.src" alt />
              </el-dialog>
            </div>
          </div>
        </el-col>-->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel_u">取 消</el-button>
        <el-button type="primary" @click="reset_u">重 置</el-button>
        <el-button type="primary" @click="updata_save">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="党员信息详情"
      v-if="$route.path === '/info/party'"
      width="40%"
      :show-close="true"
      :close-on-click-modal="false"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible_all"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="5.625rem"
        class="d-flex flex-column w-10 p-2 pt-0"
      >
        <el-col :span="24">
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-center">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">姓名</label>
              <div class="el-form-item__content">
                <el-input v-model="form.yonghu.userName" readonly="true" clearable disabled></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">身份证号</label>
              <div class="el-form-item__content">
                <el-input v-model="form.pmBeiyong1" readonly="true" clearable></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">家庭住址</label>
              <div class="el-form-item__content">
                <el-input v-model="form.pmJiguan" readonly="true" clearable></el-input>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">入党时间</label>
              <div class="el-form-item__content">
                <el-date-picker
                  disabled
                  v-model="form.pmiJointime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                ></el-date-picker>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" clearable style="width: 90px;">文化程度</label>
              <div class="el-form-item__content">
                <el-select
                  v-model="form.pmiDegreeofeducation"
                  placeholder="请选择"
                  disabled
                  @change="show_mes"
                >
                  <el-option
                    v-for="item in ['小学', '初级中学', '高级中学', '专科', '本科', '硕士研究生', '博士研究生']"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">就职单位</label>
              <div class="el-form-item__content">
                <el-input v-model="form.pmiInauguralunit" readonly="true" clearable></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="12" class="d-flex flex-column ai-start">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">性别</label>
              <div class="el-form-item__content">
                <el-select v-model="form.yonghu.userSex" disabled clearable>
                  <el-option :label="男" value="男"></el-option>
                  <el-option :label="女" value="女"></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">民族</label>
              <div class="el-form-item__content">
                <el-select v-model="form.nation" disabled clearable placeholder="请选择">
                  <el-option
                    v-for="nation in nations"
                    :key="nation"
                    :label="nation.nName"
                    :value="nation.nKey"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">镇</label>
              <div class="el-form-item__content">
                <el-select
                  disabled
                  v-model="form.mZhenid"
                  clearable
                  placeholder="请选择想要查看的镇"
                  @change="get_villageAtt(true)"
                >
                  <el-option
                    v-for="(town, index) in townAtt_form"
                    :key="index"
                    :label="town.zName"
                    :value="town.zhenId"
                  ></el-option>
                </el-select>
              </div>
            </div>

            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">村</label>
              <div class="el-form-item__content">
                <el-select
                  disabled
                  v-model="form.pmVillage"
                  clearable
                  placeholder="请选择想要查看的村"
                  @change="get_jobAtt(true)"
                >
                  <el-option
                    v-for="(village, index) in villageAtt_form"
                    :key="index"
                    :label="village.vName"
                    :value="village.villageId"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">职务</label>
              <div class="el-form-item__content">
                <el-select v-model="form.job.jKey" disabled clearable placeholder="请选择">
                  <el-option
                    v-for="item in jobAtt"
                    :key="item"
                    :label="item.J_name"
                    :value="item.J_Key"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">干部职位</label>
              <div class="el-form-item__content">
                <el-input v-model="form.pmiInauguralunit" readonly="true" clearable></el-input>
              </div>
            </div>
          </el-col>
        </el-col>
        <el-col :span="24" class="mb-2">
          <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
            <label for="date" class="el-form-item__label" style="width: 5.625rem;">发展时间</label>
            <div class="el-form-item__content">
              <el-date-picker
                disabled
                v-model="form.pmJoined"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
          </div>
          <div class="el-form-item el-form-item--medium d-flex jc-start w-10 d-flex jc-start">
            <label for="date" class="el-form-item__label" style="width: 5.625rem;">简介</label>
            <div class="el-form-item__content flex-1 pr-2">
              <el-input type="textarea" readonly="true" v-model="form.pmiDetails"></el-input>
            </div>
          </div>
        </el-col>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>


<script>
export default {
  data() {
    return {
      model: {},
      admin: {},
      obj: {},
      items: [
        //表格内容
      ],
      init_items: [
        //原始表格渲染数据
      ],
      pagination: {
        current_page: 1,
        page_sizes: [20, 30, 50, 100],
        page_size: 20,
        total: 0,
        page_length: 0
      },
      loading: true,
      formLabelWidth: "100px",
      form: {
        //弹出框内容
        yonghu: {},
        job: {}
      },
      //文件上传
      dangyuan_pic: {},
      query: {
        //检索对象
        mRegion_: "1349"
      },
      //序列id
      index_id: 0,
      index: 0,
      //对应村
      villageAtt: [],
      villageAtt_form: [],
      //对应镇
      townAtt: [],
      townAtt_form: [],
      //对应组
      groupAtt: [],
      groupAtt_form: [],
      //对应类型
      jobAtt: [],
      //民族
      nations: [],
      //文化程度
      politis: [],
      //多删数组
      delAtt: [],
      multipleSelection: [],
      //文件上传
      fileList: [],
      //删除的对象
      del_obj: {},
      delMany: {},
      //模态框
      dialogFormVisible_create: false,
      dialogFormVisible_edmit: false,
      dialogFormVisible_all: false
    };
  },

  methods: {
    setQuery() {
      if (this.admin.mType == 4) {
        this.query.mRegion_ = this.admin.mRegion;
        this.query.mZhenid_ = this.admin.mZhenid;
        this.get_villageAtt();
      }
      if (this.admin.mType == 5) {
        this.query.mRegion_ = this.admin.mRegion;
        this.query.mZhenid_ = this.admin.mZhenid;
        this.query.mVillageid_ = this.admin.mVillageid;
      }
    },
    setObj(obj) {
      obj.mType = this.admin.mType;
      obj.mRegion = "1349";
      obj.managerId = this.admin.managerId || "";
      obj.mZhenid = this.admin.mZhenid || "";
      obj.mVillageid = this.admin.mVillageid || "";
      obj.rKey = this.query.mRegion_ || "1349";
      obj.zhenId = this.query.mZhenid_ || 0;
      obj.villageId = this.query.mVillageid_ || 0;
      obj.userName = this.query.userName || "";
      obj.startPage = this.pagination.current_page;
      obj.pageSize = this.pagination.page_size;
    },
    async get_townAtt(flag) {
      let res;
      if (flag) {
        res = await this.$http.get(`/caiwu/findzhenByRegionId/1349`);
        this.townAtt_form = res.data.data;
      } else {
        res = await this.$http.get(
          `/caiwu/findzhenByRegionId/${this.query.mRegion_}`
        );
        this.townAtt = res.data.data;
      }
    },
    async get_villageAtt(flag) {
      let res;
      if (flag) {
        res = await this.$http.get(
          `/caiwu/findzhenByZhenId/${this.form.mZhenid}`
        );
        this.villageAtt_form = res.data.data;
      } else {
        res = await this.$http.get(
          `/caiwu/findzhenByZhenId/${this.query.mZhenid_}`
        );
        this.villageAtt = res.data.data;
      }
    },
    async get_groupAtt(flag) {
      let res;
      if (flag) {
        res = await this.$http.get(`/caiwu/findZu/${this.form.mVillageid}`);
        this.groupAtt_form = res.data.data;
      } else {
        res = await this.$http.get(`/caiwu/findZu/${this.query.mVillageid_}`);
        this.groupAtt = res.data.data;
      }
    },
    async get_jobAtt() {
      const res = await this.$http.get(
        `/villagecadres/queryJobNameBuVillageId/${this.form.pmVillage}`
      );
      this.jobAtt = res.data.list;
    },
    async get_politis() {
      const res = await this.$http.get("/yonghus/queryPolicyStatus");
      this.politis = res.data.policyStatus;
    },
    async get_nations() {
      const res = await this.$http.get("/v/NationList");
      this.nations = res.data.nations;
    },
    async get_vill_to_town() {
      const res = await this.$http.post(
        `/h/inSelect`,
        this.Qs.stringify({ villageId: this.form.pmVillage })
      );
      if (res.status == 200) {
        this.form.mZhenid = res.data.data[0].zhenId;
      }
    },
    //请求数据
    async fetch(obj) {
      this.setObj(obj);
      const res = await this.$http.post(
        "/queryPartyMembers",
        this.Qs.stringify(obj)
      );
      res.data.partyMembers.forEach(item => {
        if (item.pmiJointime) {
          item.pmiJointime = item.pmiJointime.slice(0, 10);
        }
        if (item.pmJoined) {
          item.pmJoined = item.pmJoined.slice(0, 10);
        }
      });
      this.init_items = res.data;
      this.items = res.data.partyMembers;
      this.up_pagination();
      if (
        this.$util.getCookie("current_page") !== String(this.pagination.current_page)
      ) {
        this.handleCurrentChange(this.$util.getCookie("current_page"));
      }
      if (res.status == 200) {
        this.loading = false;
      }
    },
    handleSelectionChange(val) {
      let att = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach(item => {
        let { partymemberinformationId } = item;
        att.push(partymemberinformationId);
      });
      this.delAtt = att;
    },
    setIndex() {
      this.$basicMes.forEach((item, index) => {
        if (item.name == this.query.town) {
          this.villageAtt = this.$basicMes[index].village;
        }
      });
    },
    get_delObj() {},
    get_delMany() {
      this.delMany = this.delAtt;
    },
    del(index, name) {
      this.get_delObj();
      this.index_id = index;
      this.form = this.items[index];

      this.$confirm(`此操作将永久删除  是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(async index => {
          const res = await this.$http.delete(
            `/deletePartyMemberById/${this.form.partymemberinformationId}/${this.admin.managerId}`
          );
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.fetch(this.obj);
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    updata(index, flag) {
      this.index_id = index;
      this.form = this.items[index];
      this.get_townAtt(true);
      this.get_vill_to_town();
      setTimeout(() => {
        this.get_villageAtt(true);
        this.get_jobAtt();
      }, 200);
      if (flag) {
        this.dialogFormVisible_all = true;
      } else {
        this.dialogFormVisible_edmit = true;

         
      }
    },
    async del_multip(name) {
      if (!this.delAtt.length) {
        return;
      }
      this.get_delMany();
      let str = "";
      this.multipleSelection.forEach(item => {
        str += item[name] + "\t\t";
      });

      this.$confirm(`此操作将永久删除  , 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(async index => {
          const res = await this.$http.delete(
            `/deleteManyPartyMemberById/${this.delAtt.toString()}/${
              this.admin.managerId
            }`
          );
          console.log(".....////");
          console.log(res);
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.fetch(this.obj);
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //选择文件
    select_file() {
      let path = this.$route.name;
    },
    success_file(res, file, fileList) {
      if (res.error === "") {
        this.$message({
          type: "success",
          message: "导入成功"
        });
      } else {
        this.$message({
          type: "error",
          message: res.error
        });
      }
    },
    //文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    //分页功能
    up_pagination() {
      this.pagination.page_length = Math.ceil(
        this.init_items.count / this.pagination.current_page
      );
      this.pagination.total = this.init_items.count;
    },
    handleSizeChange(val) {
      this.pagination.page_size = val;
      let { mRegion_, mZhenid_, mVillageid_ } = this.query;
      let obj = { mRegion_, mZhenid_, mVillageid_ };
      this.fetch(obj);
    },
    async handleCurrentChange(val) {
      this.pagination.current_page = val;
      this.$util.setCookie("current_page", this.pagination.current_page);
      let { mRegion_, mZhenid_, mVillageid_ } = this.query;
      let obj = { mRegion_, mZhenid_, mVillageid_ };
      this.fetch(obj);
    },
    //query
    to_query() {
      let { mRegion_, mZhenid_, mVillageid_ } = this.query;
      let obj = { mRegion_, mZhenid_, mVillageid_ };
      this.fetch(obj);
    },

    //create
    reset_c() {
      this.$confirm("确定重置新增数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(() => {
        this.$message({
          type: "success",
          message: "已重置"
        });
        this.form = {};
      });
    },
    show_mes() {
      this.$notify({
        title: "学历信息",
        dangerouslyUseHTMLString: true,
        message: `<p><strong>学历的档次划分为:</strong></p>
              1、初等教育：小学。<br>
              2、中等教育：初级中学；高级中学（中师、中专、职高、中技、普通高级中学）。<br><br>
              3、高等教育：专科（高职、高专、高技）、本科 、硕士研究生、博士研究生。<br><br>
              其中，高等教育又分为普通高等教育和成人高等教育（脱产、业余、函授）、高等教育自学考试、电大开放教育、远程网络教育等。
              <a target="_blank"  href="https://zhidao.baidu.com/question/462126753.html">了解更多</a>`,
        duration: 0
      });
    },
    show_init() {
      switch (this.admin.mType) {
        case 2:
          this.get_townAtt(true);
          break;
        case 3:
          break;
        case 4:
          this.get_townAtt(true);
          this.form.mZhenid = this.admin.mZhenid;
          this.get_villageAtt(true);
          break;
        case 5:
          this.get_townAtt(true);
          this.form.mZhenid = this.admin.mZhenid;
          this.get_villageAtt(true);
          this.form.pmVillage = this.admin.mVillageid;
          this.get_jobAtt(true);
          break;
      }
    },
    clear_form() {
      for (let item in this.form) {
        this.form[item] = "";
      }
      console.log(this.form);
    },
    show_form() {
      this.clear_form();
      this.show_init();
      this.get_politis();
      this.get_nations();
      this.dialogFormVisible_create = true;
    },
    set_form() {
      this.form.managerId = this.admin.managerId;
    },
    cancel_c() {
      this.$confirm("取消添加将不会保存该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "已取消！"
          });
          this.dialogFormVisible_create = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    success_c(res, file, files) {
      this.$message({
        type: "success",
        message: `${res.result}`
      });
      this.dialogFormVisible_create = false;
    },
    up_before(file) {},
    async upload(file) {
      console.log(file);
      let obj = new FormData();
      obj.append("dangyuan_pic", file.file);
      this.form.dangyuan_pic = obj;
      console.log(this.form);
    },
    async create() {
      this.set_form(this.form);
      const res = await this.$http.post(
        "/insertPartyMemberSubmit",
        this.Qs.stringify(this.form)
      );
      console.log(res);
      if (res.status == 200) {
        this.dialogFormVisible_create = false;
        this.fetch(this.obj);
        this.$message({
          message: "编辑成功",
          type: "success"
        });
      } else {
        this.$message({
          message: "编辑失败",
          type: "error"
        });
      }
    },

    reset_u() {
      this.$confirm("确定重置编辑数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(() => {
        this.$message({
          type: "success",
          message: "已重置"
        });
        this.clear_form();
        this.fetch(this.obj);
      });
    },
    cancel_u() {
      this.$confirm("取消添加将不会保存该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "已取消！"
          });
          this.fetch(this.obj);
          setTimeout(() => {
            this.dialogFormVisible_edmit = false;
          }, 200);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    modify_form() {
      // let
      let obj = {
        joinTime: "pmiJointime",
        pmiPost: ["job", "jKey"],
        fazhanTime: "pmJoined"
      };
      this.form.managerId = this.admin.managerId;
      this.form.id = this.form.partymemberinformationId;
      this.form.joinTime = this.form["pmiJointime"];
      this.form.fazhanTime = this.form["pmJoined"];
      this.form.pmiPost = this.form["job"]["jKey"];
      delete this.form["pmiJointime"];
      delete this.form["pmJoined"];
    },
    async updata_save() {
      this.modify_form();
      const res = await this.$http.put(
        "/updatePartyMemberSubmit",
        this.Qs.stringify(this.form)
      );
      if (res.status == 200) {
        this.dialogFormVisible_edmit = false;
        this.fetch(this.obj);
        this.$message({
          message: "编辑成功",
          type: "success"
        });
        this.fetch(this.obj);
      } else {
        this.$message({
          message: "编辑失败",
          type: "error"
        });
      }
    },
    cancel() {
      this.dialogFormVisible_all = false;
    },
    showAll(index) {
      this.updata(index, true);
    }
  },
  created() {
    this.admin = this.$util.handleLocalStorage("get", "admin");
    this.pagination.current_page = 1;
    this.$util.setCookie("current_page", this.pagination.current_page);
    this.get_townAtt()
    this.setQuery();
    this.fetch(this.obj);
  }
};
</script>

<style lang="scss" scoped>
.query-form {
  padding-top: 20px;
  margin-bottom: 20px;
  background-color: #f2f2f2;
  display: flex;
  justify-content: flex-start;
}
.el-form--inline .el-form-item {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
}
</style>

